<template>
  <div id="app">
    <h1>vue_cli</h1>
    <p ref="test">{{ msg }}</p>
    <button @click="msgchange">changmsg</button>
    <button @click="fabu">发布消息</button>
    <!-- props(父传子 一层层传递) -->
    <PropsA title="别打仗了！！" :obj="obj" />
    <hr />
    <EmitA @emitNum="emitNum" />
    <hr />
    <Cdu :arr="arr" @delItem="delItem" />
  </div>
</template>

<script>
import PubSub from "pubsub-js";
import PropsA from "./components/PropsA";
import EmitA from "./components/EmitA";
import Cdu from "./components/Cdu";
// 使用pubsub-js库去传递数据 消息订阅发布
export default {
  name: "App",
  data() {
    return {
      msg: "tianqi",
      obj: {
        name: "tom",
        age: 10
      },
      arr: [
        { name: "tom", age: 10 },
        { name: "xiaohong", age: 50 },
        { name: "xiaoming", age: 80 }
      ]
    };
  },
  components: {
    PropsA,
    EmitA,
    Cdu
  },
  // provide和inject组合一起进行传递数据，作用：父级组件往子级组件传递数据 provide传递（可以是对象可以是函数，函数情况下可以使用this调用组件中的data数据）  inject接收
  /*   provide: {
    info: "侯妃",
    obj: [1, 2]
  }, */
  provide() {
    return {
      name: "侯妃",
      info: this.msg
    };
  },
  methods: {
    emitNum(num) {
      console.log(num);
    },
    delItem(num) {
      console.log(num);
      this.arr.splice(num, 1);
    },
    msgchange() {
      this.msg = "俄乌战争";
    },
    fabu() {
      // 发布消息
      PubSub.publish("givetianqi", this.msg);
    }
  },
  beforeCreate() {
    console.log("vm-beforeCreate");
  },
  created() {
    console.log("vm-created");
  },
  beforeMount() {
    console.log("vm-beforeMount");
    // 在new Vue实例对象中this.$el能获取到
    console.log(this.$el);
  },
  mounted() {
    console.log("vm-mounted");
    console.log(this.$el);
  },
  beforeUpdate() {
    console.log("vm-beforeUpdate");
    console.log(this.$refs.test.innerHTML);
  },
  updated() {
    console.log("vm-updated");
    console.log(this.$refs.test.innerHTML);
  },
  beforeDestroy() {
    console.log("vm-beforeDestroy");
  },
  destroyed() {
    console.log("vm-destroyed");
  }
};
</script>
<style lang="less"></style>
